import * as THREE from 'three'
import Sizes from '../Utils/Sizes'
import Camera from '../General/Camera'
import Experience from '../General/Experience'
import Resource from '../Utils/Resource'
import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
import { Dictionary } from 'vue-router/types/router'
import { GenerateStoreName } from '../Methods/Layers'
export default class Room {
  experience!: Experience
  sizes!: Sizes
  scene!: THREE.Scene
  camera!: Camera
  canvas!: HTMLCanvasElement
  renderer!: THREE.WebGLRenderer
  resource!: Resource
  room!: GLTF
  actualRoom!: THREE.Group
  layers!: Dictionary<any>
  constructor() {
    this.experience = new Experience()
    const { scene, resource } = this.experience
    this.scene = scene
    this.resource = resource
    // 所有导入模型中 name 为 room 的模型
    this.room = this.resource.items.room
    this.actualRoom = this.room.scene
    this.setModel()
  }
  setModel() {
    const result: Dictionary<any> = {}
    this.actualRoom.children.forEach(child => {
      child.castShadow = true
      child.receiveShadow = true
      if (child instanceof THREE.Group) {
        const newlyChildName = GenerateStoreName(result, child.name)
        result[newlyChildName] = {}
        child.children.forEach(subChild => {
          subChild.castShadow = true
          subChild.receiveShadow = true
          result[newlyChildName][GenerateStoreName(result, subChild.name)] = subChild.uuid
        })
      } else {
        result[GenerateStoreName(result, child.name)] = child.uuid
      }
      if (child.name === 'Aquarium') {
        const childMesh = child.children[0] as THREE.Mesh
        childMesh.material = new THREE.MeshPhysicalMaterial()
        const childMeshMaterial = childMesh.material as THREE.MeshPhysicalMaterial
        childMeshMaterial.roughness = 0
        childMeshMaterial.color.set(0x549dd2)
        childMeshMaterial.ior = 3
        childMeshMaterial.transmission = 1
        childMeshMaterial.opacity = 1
        childMeshMaterial.depthWrite = false
        childMeshMaterial.depthTest = false
      }
      if (child.name === 'Computer') {
        const childMesh = child.children[1] as THREE.Mesh
        childMesh.material = new THREE.MeshBasicMaterial({
          map: this.resource.items.screen
        })
      }
      if (child.name === 'Mini_Floor') {
        // child.position.x = -0.289521
        // child.position.z = 8.83572
      }
    })
    this.layers = result
    const width = 0.5
    const height = 0.7
    const intensity = 1
    const rectLight = new THREE.RectAreaLight(0xffffff, intensity, width, height)
    rectLight.position.set(7.68244, 7, 0.5)
    rectLight.rotation.x = -Math.PI / 2
    rectLight.rotation.z = Math.PI / 4
    this.actualRoom.add(rectLight)
    this.scene.add(this.actualRoom)
    this.actualRoom.scale.set(0.11, 0.11, 0.11)
  }
  resize() {}
  update() {}
}
